<template>
  <div class="container">
    <normal-title
      title="我的订单"
      :back="true"
    ></normal-title>
    <div class="nav">
      <div class="row nav-bar">
        <div
          @click="toggleStatus(index)"
          v-for="(item,index) in ['全部','待支付','待发货','待自提','待收货']"
          :key="index"
          :class="activedNav==index?'actived':''"
        >{{item}}</div>
      </div>
    </div>
    <div class="content">
      <div
        v-if="!activedData.length>0"
        class="no-data"
      >
        <img
          src="../../images/no-order.png"
          mode="aspectFit"
        >
        <div class="no-order-text">您还没有相关订单呐~</div>
        <a
          open-type="switchTab"
          href="/pages/index/main"
          hover-class="none"
          class="btn pay"
        >去看看</a>
      </div>
      <div
        class="item"
        v-for="(item,index) in activedData"
        :key="index"
      >
        <a
          :href="'/pages/orderDetail/main?order_id='+item.order_id"
          hover-class="none"
        >
          <order-detail :data="item"></order-detail>
        </a>
        <div
          v-if="item.order_status==='0'"
          class="row right"
        >
          <div
            @click="delOrder(item.order_id)"
            class="btn cancel"
          >取消订单</div>
          <div
            @click="payNow(item.order_id)"
            class="btn pay"
          >去支付</div>
        </div>
        <div
          v-if="item.order_status==='14'"
          class="row right"
        >
          <button
            open-type="contact"
            class="btn cancel"
          >联系客服</button>
          <a
            :href="'/pages/refund/main?order_id='+item.order_id"
            class="btn cancel"
          >申请退款</a>
          <div
            class="btn pay"
            @click="remind"
          >提醒发货</div>
        </div>
        <div
          v-if="item.order_status==='11'"
          class="row right"
        >
          <button
            open-type="contact"
            class="btn cancel"
          >联系客服</button>
          <a
            :href="'/pages/refund/main?order_id='+item.order_id"
            class="btn cancel"
          >申请退款</a>
          <a
            href="/pages/orderDetail/main"
            class="btn pay"
          >待自提</a>
        </div>
        <div
          v-if="item.order_status==='12'"
          class="row right"
        >
          <a
            :href="'/pages/refund/main?order_id='+item.order_id"
            class="btn cancel"
          >申请退款</a>
          <a
            :href="'/pages/logisticsDetail/main?order_id='+item.order_id"
            class="btn pay"
          >查看物流</a>
        </div>
        <div
          v-if="item.order_status==='13'"
          class="row right"
        >
          <a
            :href="'/pages/refund/main?order_id='+item.order_id"
            class="btn cancel"
          >申请退款</a>
        </div>
        <div
          v-if="item.order_status==='15'"
          class="row right"
        >
          <a
            :href="'/pages/refundDetail/main?order_id='+item.order_id"
            class="btn cancel"
          >退款详情</a>
        </div>
      </div>
    </div>
    <bottom-btn />
  </div>
</template>

<script>
import { request } from "@/utils"
import BottomBtn from "@/components/BottomBtn"
import NormalTitle from "@/components/NormalTitle"
import OrderDetail from "@/components/OrderDetail"
export default {
  components: {
    NormalTitle,
    OrderDetail,
    BottomBtn
  },
  data() {
    return {
      activedData: [],
      activedNav: 0,
      page: 0,
      hasMore: true,
      payying: false
    };
  },
  computed: {},
  methods: {
    async getActiveData(init, index) {
      if (init) {
        this.page = 0;
        this.hasMore = true;
      }
      // 0/待支付,14/待发货,11/待自提,12/待收货,15退款中
      var status = [undefined, 0, 14, 11, 12];
      var orderStatus = status[index];
      var data = {
        page: this.page,
        perPage: 6
      };
      if (orderStatus !== undefined) {
        data.order_status = orderStatus;
      }
      var res = await request("/v1/order", "get", data);
      if (res.data) {
        if (init) {
          this.activedData = res.data.items;
        } else {
          this.activedData = this.activedData.concat(res.data.items);
        }
        var meta = res.data._meta;
        if (meta.currentPage === meta.pageCount) {
          this.hasMore = false;
        }
      }
    },
    async toggleStatus(index) {
      if (this.activedNav !== index) {
        this.activedNav = index;
        this.globalData.nav = this.activedNav;
        this.getActiveData(true, index);
        wx.pageScrollTo({
          scrollTop: 0,
          duration: 0
        });
      }
    },
    async delOrder(id) {
      var _this = this;
      wx.showModal({
        title: "取消订单",
        content: "确认取消该订单？",
        success(res) {
          if (res.confirm) {
            request("/v1/order/" + id + "?order_status=6", "put").then(res => {
              if (res.data.success) {
                _this.getActiveData(true, _this.activedNav);
              }
            });
          } else if (res.cancel) {
          }
        }
      });
    },
    async payNow(id) {
      var _this = this;
      if (!this.payying) {
        var result = await request("/v1/pay", "post", {
          orderId: id
        });
        wx.requestPayment({
          timeStamp: result.data.timestamp,
          nonceStr: result.data.nonceStr,
          package: result.data.package,
          signType: "MD5",
          paySign: result.data.paySign,
          complete(res) {
            _this.payying = false;
            wx.navigateTo({
              url: "/pages/orderDetail/main?order_id=" + id
            });
          }
        });
      }
    },
    remind() {
      wx.showToast({
        title: "提示成功",
        icon: "success",
        duration: 1000
      });
    }
  },
  onShow() {
    this.activedNav = this.globalData.nav || 0;
    this.getActiveData(true, this.activedNav);
  },
  async onReachBottom() {
    if (!this.hasMore) {
      return;
    }
    this.page += 1;
    this.getActiveData(false, this.activedNav);
  }
};
</script>

<style>
page {
  height: 100%;
  background: #f0f0f0;
}
</style>

<style scoped lang="scss">
button {
  border: none;
  background-color: transparent;
  box-sizing: border-box;
  width: auto;
  padding: 0;
  margin: 0;
  line-height: 0;
}
button::after {
  border: none;
}
.container {
  font-size: 16px;
  .row {
    display: flex;
    align-items: center;
  }
  .nav {
    .nav-bar {
      position: fixed;
      width: 750rpx;
      padding: 25rpx;
      justify-content: space-between;
      background: #fff;
      height: 100rpx;
      font-weight: 400;
      z-index: 20;
      div {
        height: 100rpx;
        line-height: 100rpx;
      }
      .actived {
        color: #cdb27e;
        border-bottom: 2px solid #cdb27e;
        height: 100rpx;
      }
    }
  }
  .nav::after {
    content: "";
    display: block;
    height: 100rpx;
  }
  .content {
    .no-data {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: 600rpx;
      margin-top: 200rpx;
      img {
        height: 450rpx;
      }
      .no-order-text {
        color: #cacaca;
        margin-top: -40rpx;
        font-size: 16px;
      }
    }
    padding-bottom: 1rpx;
    .item {
      background: #fff;
      border-radius: 20rpx;
      width: 700rpx;
      padding: 20rpx 30rpx;
      margin: 25rpx;
      .right {
        justify-content: flex-end;
      }
    }
    .btn {
      font-size: 26rpx;
      height: 50rpx;
      border-radius: 30rpx;
      text-align: center;
      line-height: 46rpx;
      margin-left: 20rpx;
      width: 150rpx;
    }
    .cancel {
      border: 1rpx solid #6d6d6d;
      color: #6d6d6d;
    }
    .pay {
      border: 1rpx solid #cdb27e;
      color: #cdb27e;
    }
  }
}
</style>



